import React,{Component} from 'react';
import axios from 'axios';

class NowPlaying extends Component {
	constructor (props){
		super(props);
		this.state = {
			nowplayingArr:[],
			page:1,//已经获取过的数据的页面的页码
			total:1,
			type:false,
			end:false //是否显示尾部的提示
		}
	}
	componentDidMount(){
		this.setState({
			type:true
		})
		axios.get('/v4/api/film/now-playing?page=1&count=7')
		.then((resp) =>{
			this.setState({
				nowplayingArr:resp.data.data.films,
				total:resp.data.data.page.total,
				type:false
			})
//			console.log(this.state.nowplayingArr);
		})
		//滚动条滚到一定位置,触发获取下一页的数据并渲染
		this.Scroll();
	}
	//判断滚动事件
	Scroll(){
		let _this = this;
		window.onscroll = function(){
//			console.log('11');
			//滚动后离顶部的距离,如果>100 加载下一页的数据
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			//记录一下需要加载多少也页信息
//			console.log(scrollTop)
			let count = Math.floor(scrollTop/30);
			if (count > 1){
				//一次拖拽加载的页面
				for (let i = 2;i <= count;i++){
					//这个页面的信息是否被获取到
					if (i > _this.state.page){
						//获取数据的函数
						_this.moreData(i);
						//修改当前页的页码
						_this.setState({
							page:_this.state.page+1
						})
					}
				}
			}
		}
	}

	获取下一页的数据
	moreData(i){
		//判断当前页是否大于总页数，如果小于等于总页数，获取数据
		if(i<= this.state.total){
			this.setState({
				type:true
			})
			axios.get('/v4/api/film/now-playing?page='+i+'&count=7').then((res)=>{
				//console.log(res);
				//将获取的数据追加到nowplayingArr的后面 
				//concat 数组链接
				let oldArr = this.state.nowplayingArr;
				let newArr = [];
				newArr = oldArr.concat(res.data.data.films);
				
				
				//将最新的数据保存到 nowplayingArr
				this.setState({
					nowplayingArr:newArr,
					type:false
				})
				
//				console.log(this.state.nowplayingArr);
				
			})
			
			if(i === this.state.total){
				this.setState({
					end:true
					
				})
				
			}
		}
		
		
		
	}
    render(){
        return (
        	<div className='NowPlaying-div'>
            	<ul className='NowPlaying'>
	            {
	            	this.state.nowplayingArr.map((item,index)=>
		        		<li key={index}>
		        		<div className="film-img">
		        			<img src={item.poster.origin} alt={item.name} />
		        		</div>
		        		<div className="film-names">
			        		<div className="film-name">
				        		<span>{item.name}</span>
				        		<span>
				        			{item.grade}
				        			<i className='fa fa-angle-right'></i>
				        		</span>
			        		</div>
			        		<div className="film-intro">{item.intro}</div>
			        		<div className="film-counts">
				        		<span className="film-count-color1">{item.scheduleCount}</span>
				        		<span>家影院上映&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				        		<span className="film-count-color1">{item.watchCount}</span>
				        		<span>人购票  </span>
			        		</div>
		        		</div>
		        		</li>
	        		)
	            }
	            </ul>
	            <div className= 'loading'style = {this.state.type?{'display':'block'}:{'display':'none'}}>
	            	<i className="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
	            </div>
	            {
	            	this.state.end?<div className='end'>我是有底线的........</div>:''
	            }
        	</div>
        )
    }
}
export default NowPlaying;